
<template>
  <div class="setting-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 左侧 -->
          <el-tab-pane label="分区管理">
            <!-- 按钮 -->
            <!-- <el-button type="primary" size="medium">
              请选择仓库<i class="el-icon-arrow-down el-icon--right" />
            </el-button> -->
            <span>请选择仓库：</span>
            <el-select
              v-model="value"
              @change="selectDep"
              placeholder="请选择仓库"
            >
              <el-option
                v-for="(item, index) in depList"
                :key="item.id"
                :label="item.name"
                :value="index"
              >
              </el-option>
            </el-select>
            <el-button
              type="primary"
              icon="el-icon-plus"
              style="margin-left: 100px"
              size="medium"
              @click="showDialog = true"
            >
              新增分区<i class="" />
            </el-button>
            <!-- 表格 -->
            <el-table :data="partitionList">
              <el-table-column label="序号" prop="name">
                <template #default="{ row }">
                  <!-- <i class="el-icon-receiving" /> -->
                  {{ row.id }}
                </template>
              </el-table-column>
              <!-- <el-table-column type="serial" label="序号" prop="id" width="50" /> -->
              <!-- <el-table-column type="ID" label="id" prop="id" width="50" /> -->

              <el-table-column type="partition" prop="name" label="分区名称" />
              <el-table-column type="shelves" label="分区编号" prop="number" />
              <el-table-column
                type="remark"
                label="可存放最小重量"
                prop="minweight"
                width="160"
              />
              <el-table-column
                type="state"
                label="可存放最大重量"
                prop="maxweight"
                width="160"
              />
              <el-table-column type="condition" label="货架号" prop="sort" />
              <el-table-column type="condition" label="状态" prop="statename" />
              <el-table-column type="size" label="备注" prop="remarks" />
              <el-table-column type="text" label="操作" width="300">
                <template slot-scope="scope" fixed="right">
                  <el-button
                    size="small"
                    type="primary"
                    @click="handleEdit(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!-- 分页 -->
    <div align="center">
      <el-pagination
        :current-page.sync="currentPage"
        layout="prev, pager, next, jumper"
        :total="partitionList.length"
      />
    </div>
    <!-- 新增、修改弹窗 -->
    <el-dialog :visible="showDialog" @close="closeDialog">
      <el-form
        label-width="110px"
        :rules="rules"
        :model="formData"
        ref="formDataRef"
      >
        <el-form-item prop="depositoryid" label="所属仓库" v-if="!formData.id">
          <el-select v-model="formData.depositoryid" placeholder="请选择">
            <el-option
              v-for="item in depList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分区名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入分区名称" />
        </el-form-item>
        <el-form-item label="分区编号">
          <el-input v-model="formData.number" placeholder="请输入编号" />
        </el-form-item>
        <el-form-item label="可存放最小重量">
          <el-input
            v-model="formData.minweight"
            placeholder="请输入可存放最小重量"
          />
        </el-form-item>

        <el-form-item label="可存放最大重量">
          <el-input v-model="formData.maxweight" placeholder="可存放最大重量" />
        </el-form-item>

        <el-form-item label="货架号">
          <el-input v-model="formData.sort" placeholder="请输入货架号" />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="formData.state"
            :active-text="formData.state ? '有效' : '无效'"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <!-- <el-input v-model="formData.state" placeholder="请输入状态" /> -->
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.remarks" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div style="text-align: right">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="clickSubmit">确认</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确定删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteComfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { fpartitionByDepId, insertFpartition,updateFpartition,deleteFpartition} from '@/api/depository'
import { selectAllDep} from '@/api/depository'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  },
  data() {
    return {
      value:'',
      showDialog: false,
      dialogVisible:false,//确认删除弹窗
      depIndex: 0,//所选仓库index
      depList:[], //仓库列表
      currentPage: 1,
      partitionList: [
      ],
      formData:{
        "id":null,
        "depositoryid":null,
        "name":null,
        "number":null,
        "minweight":null,
        "maxweight":null,
        "sort":null,
        "state":true,
        "remarks":null
      },
      deleteRow:null,
      numberValidateForm: {
          name: ''
      },
      //添加分区名称校验规则
      rules:{
      //验证规则
        name:[ {required:true , message:'请输入分区名称',trigger:'blur'} ]
      },
    }
  },
  mounted(){
    this.selectAllDep()
  },
  methods:{
    async selectAllDep(){
      this.depList = await selectAllDep()
    },
    selectDep(e){
      this.depIndex = e
      this.getParList(this.depList[e].id)
    },
    async getParList(depId){
      const res = await fpartitionByDepId({
        depId
      })
      res.map((item)=>{
        return item.statename= item.state==1?'有效':'无效'
      })
      this.partitionList = res
    },
    closeDialog(){
      this.showDialog = false
      this.formData = {}
    },
    handleEdit(row){
      this.formData = row
      this.showDialog = true
    },
    // async clickSubmit(){
    //   console.log(this.formData)
    //   if(this.formData.id){
    //     updateFpartition(this.formData)
    //   }else{
    //     const {id,...formData} = this.formData
    //     insertFpartition(formData)
    //   }
    //   this.showDialog = false
    //   this.getParList(this.depList[this.depIndex].id)
    // },
    
    //添加分区 
    clickSubmit(){
        this.$refs.formDataRef.validate(async(valid) => {
          if (valid) {
            await insertFpartition(this.formData)
            this.showDialog = false
            this.getParList(this.depList[this.depIndex].id)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },

    async handleDelete(row){
      // await  deleteFpartition(row.id)
      this.dialogVisible = true
      this.deleteRow = row
    },
    async deleteComfirm(){
      await deleteFpartition({
        id: this.deleteRow.id
      })
      this.dialogVisible = false
      this.getParList(this.depList[this.depIndex].id);
    }
  }

}
</script>

<style lang="scss" scoped>
.xinzeng {
  width: 70px;
  height: 40px;
  float: right;
  margin-top: -55px;
  margin-left: 210px;
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 10px;
}
.fenqu {
  width: 180px;
  height: 40px;
  float: right;
  margin-top: -70px;
  margin-right: 550px;
}
.del {
  width: 50px;
}
</style>

